<template>
  <div>
    <ckeditor
      v-model="editorData"
      :config="editorConfig"
      :editor-url="editorUrl"
    ></ckeditor>
  </div>
</template>
<script>
import CKEditor from "ckeditor4-vue";
export default {
  data() {
    return {
      editorData: "",
      editorUrl: "http://192.168.11.250:8080/ckeditor/ckeditor.js",
      editorConfig: {
        width: "820",
        autoGrow_minHeight: "730",
        skin: "moonocolor",
        // codeSnippet_theme: "dark",
        // codeSnippet_languages: {java: 'Java'},
        editorplaceholder: "开始写文章吧",
        removePlugins: "easyimage",

        // 上传图片
        filebrowserBrowseUrl: "/apps/ckfinder/3.4.5/ckfinder.html",
        filebrowserImageBrowseUrl:
          "/apps/ckfinder/3.4.5/ckfinder.html?type=Images",
        filebrowserUploadUrl:
          "/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files",
        filebrowserImageUploadUrl:
          "/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images",
        uploadUrl:
          "/apps/ckfinder/3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json",

        toolbar: [
          { name: "document", items: ["ExportPdf", "Preview"] },
          { name: "clipboard", items: ["Undo", "Redo"] },
          { name: "editing", items: ["Find", "Replace", "-"] },
          "/",
          {
            name: "basicstyles",
            items: [
              "Bold",
              "Italic",
              "Underline",
              "Strike",
              "Subscript",
              "Superscript",
              "-",
              "CopyFormatting",
              "RemoveFormat",
            ],
          },
          {
            name: "paragraph",
            items: [
              "NumberedList",
              "BulletedList",
              "-",
              "Outdent",
              "Indent",
              "-",
              "Blockquote",
              "CreateDiv",
              "-",
              "JustifyLeft",
              "JustifyCenter",
              "JustifyRight",
              "JustifyBlock",
              "-",
              "BidiLtr",
              "BidiRtl",
              "Language",
            ],
          },
          { name: "links", items: ["Link", "Unlink", "Anchor"] },
          {
            name: "insert",
            items: [
              "Image",
              "Table",
              "HorizontalRule",
              "Smiley",
              "SpecialChar",
              "PageBreak",
              "CodeSnippet",
            ],
          },
          "/",
          { name: "styles", items: ["Styles", "Format", "Font", "FontSize","Markdown"] },
          { name: "colors", items: ["TextColor", "BGColor"] },
          { name: "tools", items: ["Maximize", "ShowBlocks"] },
        ],
        removeButtons:
          "Source,Save,NewPage,Print,Templates,PasteFromWord,Scayt,SelectAll,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Language,Iframe,ShowBlocks,About",
        extraPlugins:
          "quicktable,tableresizerowandcolumn,codesnippet,autogrow,editorplaceholder,image2,uploadimage,markdown",
        qtStyle: { width: 0 },
      },
    };
  },
  methods: {
    changeColor() {
      this.$set(this.editorConfig, "skin", "moono-dark");
    },
  },
  components: {
    ckeditor: CKEditor.component,
  },
};
</script>

<style>
</style>